<template>
	<view class="home">
		<!-- 指标统计 -->
		<view class="first-module">
			<van-col :span="24" class="title-row">
				<van-col :span="10">
					<p class="title-style">指标统计</p>
				</van-col>
				<van-col :span="4">
					<p style="color:rgb(50, 50, 50)">日期：</p>
				</van-col>
				<van-col :span="10">
					<view>
						<picker mode="date" fields="year" :value="queryParamsIndex.year" :start="startDate"
							:end="endDate" @change="onIndex">
							<view>{{queryParamsIndex.year}}</view>
						</picker>
					</view>
				</van-col><br>
			</van-col>
			<van-col :span="12">
				<view class="content-module-one">
					<p class="content-style">目标营业收入总额</p>
					<span class="money-style">
						{{ statisticsIndexList.tgtIncome == null ? 0 : statisticsIndexList.tgtIncome.toFixed(2) }}</span>
					<span>万元</span>
				</view>
			</van-col>
			<van-col :span="12">
				<view class="content-module-two">
					<p class="content-style">目标回款总额</p>
					<span class="money-style">
						{{ statisticsIndexList.tgtRefund == null ? 0 : statisticsIndexList.tgtRefund.toFixed(2) }}</span>
					<span>万元</span>
				</view>
			</van-col>
			<van-col :span="12">
				<view class="content-module-three">
					<p class="content-style">目前营业收入总额</p>
					<span class="money-style">
						{{ statisticsIndexList.acIncome == null ? 0 : statisticsIndexList.acIncome.toFixed(2) }}</span>
					<span>万元</span>
				</view>
			</van-col>
			<van-col :span="12">
				<view class="content-module-four">
					<p class="content-style">目前回款总额</p>
					<span class="money-style">
						{{ statisticsIndexList.acRefund == null ? 0 : statisticsIndexList.acRefund.toFixed(2) }}</span>
					<span>万元</span>
				</view>
			</van-col>
			<van-col :span="24">
				<view class=" content-module-row">
					<p>产值完成比</p>
					<view>
						<van-progress stroke-width="20rpx" :percentage="statisticsIndexList.acRatio||0"
							style="width: 100%;"></van-progress>
					</view>
				</view>
			</van-col>
			<van-col :span="24">
				<view class=" content-module-row">
					<p>回款完成比</p>
					<view>
						<van-progress stroke-width="20rpx" :percentage="statisticsIndexList.ccRatio||0"
							style="width: 100%;"></van-progress>
					</view>
				</view>
			</van-col>
		</view>
		<!-- 项目统计 -->
		<view class="second-module">
			<van-col :span="24" class="title-row">
				<van-col :span="10">
					<p class="title-style">项目统计</p>
				</van-col>
				<van-col :span="4">
					<p style="color:rgb(50, 50, 50)">日期：</p>
				</van-col>
				<van-col :span="10">
					<view>
						<picker mode="date" fields="year" :value="queryParamsProject.year" :start="startDate"
							:end="endDate" @change="onProject">
							<view class="uni-input">{{queryParamsProject.year}}</view>
						</picker>
					</view>
				</van-col><br>
			</van-col>
			<van-col :span="24">
				<view class="big-box">
					<view class="line-left">
						<image src="/static/home_slices/ic_xiangmu_shangji.png" alt="">
							<p>商机</p>
							<p>{{statisticsProjectList.boAmt==null ? 0 :statisticsProjectList.boAmt.toFixed(2) }}万元</p>
							<p>{{statisticsProjectList.boCnt==null ? 0 :statisticsProjectList.boCnt}}个</p>
					</view>
					<view class="line">
						<image src="/static/home_slices/Line 1.png" alt="">
					</view>
					<view class="line-right">
						<table>
							<tr>
								<td>物联网</td>
								<td>
									<span class="money">
										{{statisticsProjectList.boIotAmt==null ? 0 :statisticsProjectList.boIotAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td>
									{{statisticsProjectList.boIotCnt==null ? 0 :statisticsProjectList.boIotCnt}} 个
								</td>
							</tr>
							<tr>
								<td>运维实施</td>
								<td>
									<span class="money">
										{{statisticsProjectList.boOpAmt==null ? 0 :statisticsProjectList.boOpAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td>
									{{statisticsProjectList.boOpCnt==null ? 0 :statisticsProjectList.boOpCnt}} 个
								</td>
							</tr>
							<tr>
								<td>数据采录</td>
								<td>
									<span class="money">
										{{statisticsProjectList.boDaqAmt==null ? 0 :statisticsProjectList.boDaqAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td>
									{{statisticsProjectList.boDaqCnt==null ? 0 :statisticsProjectList.boDaqCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>软件服务</td>
								<td>
									<span class="money">
										{{statisticsProjectList.boSaasAmt==null ? 0 :statisticsProjectList.boSaasAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td>
									{{statisticsProjectList.boSaasCnt==null ? 0 :statisticsProjectList.boSaasCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>其他</td>
								<td>
									<span class="money">
										{{statisticsProjectList.boOtherAmt==null ? 0 :statisticsProjectList.boOtherAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td style=" text-align: right">
									{{statisticsProjectList.boOtherCnt==null ? 0 :statisticsProjectList.boOtherCnt}} 个
								</td>
							</tr>
						</table>
					</view>
				</view>
			</van-col>
			<van-col :span="24">
				<view class="big-box">
					<view class="line-left">
						<image src="/static/home_slices/ic_xiangmu_lixiang.png" alt="">
							<p>立项项目</p>
							<p>{{statisticsProjectList.prjAmt==null ? 0 :statisticsProjectList.prjAmt.toFixed(2)}}万元</p>
							<p>{{statisticsProjectList.prjCnt==null ? 0 :statisticsProjectList.prjCnt}}个</p>
					</view>
					<view class="line">
						<image src="/static/home_slices/Line 1.png" alt="">
					</view>
					<view class="line-right marginLeft">
						<table>
							<tr>
								<td>物联网</td>
								<td>
									<span class="money">
										{{statisticsProjectList.prjIotAmt==null ? 0 :statisticsProjectList.prjIotAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>

								<td>
									{{statisticsProjectList.prjIotCnt==null ? 0 :statisticsProjectList.prjIotCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>运维实施</td>
								<td>
									<span class="money">
										{{statisticsProjectList.prjOpAmt==null ? 0 :statisticsProjectList.prjOpAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td style=" text-align: right">
									{{statisticsProjectList.prjOpCnt==null ? 0 :statisticsProjectList.prjOpCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>数据采录</td>
								<td>
									<span class="money">
										{{statisticsProjectList.prjDaqAmt==null ? 0 :statisticsProjectList.prjDaqAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td style=" text-align: right">
									{{statisticsProjectList.prjDaqCnt==null ? 0 :statisticsProjectList.prjDaqCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>软件服务</td>
								<td>
									<span
										class="money">{{statisticsProjectList.prjSaasAmt==null ? 0 :statisticsProjectList.prjSaasAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td style=" text-align: right">
									{{statisticsProjectList.prjSaasCnt==null ? 0 :statisticsProjectList.prjSaasCnt}}
									个
								</td>
							</tr>
							<tr>
								<td>其他</td>
								<td>
									<span class="money">
										{{statisticsProjectList.prjOtherAmt==null ? 0 :statisticsProjectList.prjOtherAmt.toFixed(2)}}</span>
									<span class="wan-style">万元</span>
								</td>
								<td style=" text-align: right">
									{{statisticsProjectList.prjOtherCnt==null ? 0 :statisticsProjectList.prjOtherCnt}}
									个
								</td>
							</tr>
						</table>
					</view>
				</view>
			</van-col>
			<van-col :span="24">
				<view class="small-box">
					<image src="/static/home_slices/ic_xiangmu_yiyanshou.png" alt="">
						<p>已验收项目金额</p>
						<view>
							<span class="money">
								{{statisticsProjectList.appdAmt==null ? 0 :statisticsProjectList.appdAmt.toFixed(2)}}</span>
							<span class="wan-style">万元</span>
						</view>
				</view>
			</van-col>
			<van-col :span="24">
				<view class="small-box">
					<image src="/static/home_slices/ic_xiangmu_kaizhanzhong.png" alt="">
						<p>开展中项目金额</p>
						<view>
							<span class="money">
								{{statisticsProjectList.ongoingAmt==null ? 0 :statisticsProjectList.ongoingAmt.toFixed(2)}}</span>
							<span class="wan-style">万元</span>
						</view>
				</view>
			</van-col>
		</view>
		<!-- 合同统计 -->
		<view class="thirdly-module ">
			<van-col :span="24" class="title-row">
				<van-col :span="10">
					<p class="title-style">合同统计</p>
				</van-col>
				<van-col :span="4">
					<p style="color:rgb(50, 50, 50)">日期：</p>
				</van-col>
				<van-col :span="10">
					<view>
						<picker mode="date" fields="year" :value="queryParamsContract.year" :start="startDate"
							:end="endDate" @change="onContract">
							<view class="uni-input">{{queryParamsContract.year}}</view>
						</picker>
					</view>
				</van-col><br>
				<van-col :span="24">
					<view class="big-box">
						<view class="line-left">
							<p>合同总金额</p>
							<p>
								{{statisticsContractList.contAmt==null ? 0 : statisticsContractList.contAmt.toFixed(2)}}万元
							</p>
						</view>
						<view class="line">
							<image src="/static/home_slices/Line 1.png" alt="">
						</view>
						<view class="line-right">
							<table>
								<tr>
									<td>协作</td>
									<td>
										<span class="money">
											{{statisticsContractList.coopAmt==null ? 0 : statisticsContractList.coopAmt.toFixed(2)}}
										</span> 
										<span class="wan-style">万元</span>
									</td>
								</tr>
								<tr>
									<td>物资</td>
									<td>
										<span class="money">
											{{statisticsContractList.matAmt==null ? 0 : statisticsContractList.matAmt.toFixed(2)}}</span>
										<span class="wan-style">万元</span>
									</td>
								</tr>
								<tr>
									<td>非物资</td>
									<td>
										<span class="money">
											{{statisticsContractList.nmatAmt==null ? 0 : statisticsContractList.nmatAmt.toFixed(2)}}</span>
										<span class="wan-style">万元</span>
									</td>
								</tr>
							</table>
						</view>
					</view>
				</van-col>
				<van-col :span="24">
					<view class="big-box">
						<view class="line-left">
							<p>合同总数</p>
							<span>
								{{statisticsContractList.contCnt==null ? 0 : statisticsContractList.contCnt}}个
							</span>
						</view>
						<view class="line">
							<image src="/static/home_slices/Line 1.png" alt="">
						</view>
							<view class="line-right">
								<table>
									<tr>
										<td>协作</td>
										<td> 
										<span class="money">
												{{statisticsContractList.coopCnt==null ? 0 : statisticsContractList.coopCnt}}</span>
											<span>个</span>
										</td>
									</tr>
									<tr>
										<td >物资</td>
										<td ><span class="money" >
												{{statisticsContractList.matCnt==null ? 0 : statisticsContractList.matCnt}}</span>
											<span>个</span>
										</td>
									</tr>
									<tr>
										<td >非物资</td>
										<td > <span class="money">
												{{statisticsContractList.nmatCnt==null ? 0 : statisticsContractList.nmatCnt}}</span>
											<span>个</span>
										</td>
									</tr>
								</table>
							</view>
					</view>
				</van-col>
				<van-col :span="24">
					<view class="small-box">
						<view class="white-text">
							已验收项目中
						</view>
						<view class="very-small-box">
							<view class="line-left">
								<p>未签订合同项目总个数</p>
								<span class="text-style">
									{{statisticsContractList.appdNcontCnt==null ? 0 : statisticsContractList.appdNcontCnt}}个</span>
							</view>
							<image src="/static/home_slices/Line 1.png" alt="">
							<view class="line-right">
								<p>未签订合同总金额</p>
								<span class="text-style">
									{{statisticsContractList.appdNcontAmt==null ? 0 : statisticsContractList.appdNcontAmt.toFixed(2)}}万元</span>
							</view>
						</view>
					</view>
				</van-col>
				<van-col :span="24">
					<view class="small-box">
						<view class="white-text">
							未验收项目中
						</view>
						<view class="very-small-box">
							<view class="line-left">
								<p>未签订合同项目总个数</p>
								<span class="text-style">
									{{statisticsContractList.ongoingNcontCnt==null ? 0 : statisticsContractList.ongoingNcontCnt}}个</span>
							</view>
							<image src="/static/home_slices/Line 1.png" alt="">
							<view class="line-right">
								<p>未签订合同总金额</p>
								<span class="text-style">
									{{statisticsContractList.ongoingNcontAmt==null ? 0 : statisticsContractList.ongoingNcontAmt.toFixed(2)}}万元</span>
							</view>
						</view>
					</view>
				</van-col>
			</van-col>
		</view>
		<!-- 账款统计 -->
		<view class="fourthly-module">
			<van-col :span="24" class="title-row">
				<van-col :span="10">
					<p class="title-style">账款统计</p>
				</van-col>
				<van-col :span="4">
					<p style="color:rgb(50, 50, 50)">日期：</p>
				</van-col>
				<van-col :span="10">
					<view>
						<picker mode="date" fields="year" :value="queryParamsMoney.year" :start="startDate"
							:end="endDate" @change="onMoney">
							<view class="uni-input">{{queryParamsMoney.year}}</view>
						</picker>
					</view>
				</van-col><br>
			</van-col>
			<van-col :span="24" style="width: 100%" class="big-box">
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan1.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>项目应收账款</p>
							<span class="money">
								{{statisticsMoneyList.prjAr==null ? 0 : statisticsMoneyList.prjAr.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan2.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>合同应收账款</p>
							<span class="money">
								{{statisticsMoneyList.contAr==null ? 0 : statisticsMoneyList.contAr.toFixed(2)}}万元</span>
							
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan3.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>已开票金额</p>
							<span class="money">
								{{statisticsMoneyList.invAmt==null ? 0 : statisticsMoneyList.invAmt.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan4.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>已开票回款金额</p>
							<span class="money">
								{{statisticsMoneyList.invAmtRefund==null ? 0 : statisticsMoneyList.invAmtRefund.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan5.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>已开票未回款金额</p>
							<span class="money">
								{{statisticsMoneyList.invAmtUnpaid==null ? 0 : statisticsMoneyList.invAmtUnpaid.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_zhangkuan6.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>未开票金额</p>
							<h4></h4>
							<span class="money">
								{{statisticsMoneyList.unInvAmt==null ? 0 : statisticsMoneyList.unInvAmt.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
			</van-col>
		</view>
		<!-- 成本统计 -->
		<view class="fifth-module">
			<van-col :span="24" class="title-row">
				<van-col :span="10">
					<p class="title-style">成本统计</p>
				</van-col>
				<van-col :span="4">
					<p style="color:rgb(50, 50, 50)">日期：</p>
				</van-col>
				<van-col :span="10">
					<view>
						<picker mode="date" fields="year" :value="queryParamsCost.year" :start="startDate"
							:end="endDate" @change="onCost">
							<view>{{queryParamsCost.year}}</view>
						</picker>
					</view>
				</van-col><br>
			</van-col>
			<van-col :span="24" class="big-box">
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben1.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>总成本</p>
							<span class="money">
								{{statisticsCostList.totalCost==null ? 0 :statisticsCostList.totalCost.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben2.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>销售成本</p>
							<span class="money">
								{{statisticsCostList.saleCost==null ? 0 :statisticsCostList.saleCost.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben3.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>管理成本</p>
							<span class="money">
								{{statisticsCostList.mgmtCost==null ? 0 :statisticsCostList.mgmtCost.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben4.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>生产成本</p>
							<span class="money">
								{{statisticsCostList.prodCost==null ? 0 :statisticsCostList.prodCost.toFixed(2)}}万元</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben5.png" alt="" >
						</van-col>
						<van-col :span="24">
							<p>毛利润</p>
							<span class="money">
								{{statisticsCostList.grossProfit==null ? 0 :statisticsCostList.grossProfit.toFixed(2)}}</span>
						</van-col>
					</view>
				</van-col>
				<van-col :span="12">
					<view class=" credit-box">
						<van-col :span="0">
							<image src="/static/home_slices/ic_chengben6.png" alt="">
						</van-col>
						<van-col :span="24">
							<p>毛利润率</p>
							<span class="money">
								{{statisticsCostList.grossProfitMargin==null ? 0 :statisticsCostList.grossProfitMargin.toFixed(2)}}%</span>
						</van-col>
					</view>
				</van-col>
			</van-col>
		</view>
	</view>
</template>

<script>
	import {
		statisticsIndex,
		statisticsProject,
		statisticsContract,
		statisticsMoney,
		statisticsCost,
	} from "@/api/index.js";
	export default {
		data() {
			return {
				//指标
				queryParamsIndex: {
					year: new Date().getFullYear().toString(),
				},
				//项目
				queryParamsProject: {
					year: new Date().getFullYear().toString(),
				},
				//合同
				queryParamsContract: {
					year: new Date().getFullYear().toString(),
				},
				//账款
				queryParamsMoney: {
					year: new Date().getFullYear().toString(),
				},
				//成本
				queryParamsCost: {
					year: new Date().getFullYear().toString(),
				},
				statisticsIndexList: [],
				statisticsMoneyList: [],
				statisticsProjectList: [],
				statisticsCostList: [],
				statisticsContractList: [],
				showPicker: false
			}
		},
		onLoad() {
			this.getIndexYear();
			this.getProject();
			this.getContract();
			this.getMoney();
			this.getCost();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//指标统计
			getIndexYear() {
				console.log("当前年份:", this.queryParamsIndex.year);
				statisticsIndex(this.queryParamsIndex).then((response) => {
					this.statisticsIndexList = response;
					console.log(this.statisticsIndexList, "this.statisticsIndexList");
				});
			},
			//项目统计
			getProject() {
				console.log("当前年份:", this.queryParamsProject.year);
				statisticsProject(this.queryParamsProject).then((response) => {
					this.statisticsProjectList = response;
					console.log(this.statisticsProjectList, "this.statisticsProjectList");
				});
			},
			//合同统计
			getContract() {
				console.log("当前年份:", this.queryParamsContract.year);
				statisticsContract(this.queryParamsContract).then((response) => {
					this.statisticsContractList = response;
					console.log(this.statisticsContractList, "this.statisticsContractList");
				});
			},
			//账款统计
			getMoney() {
				console.log("当前年份:", this.queryParamsMoney.year);
				statisticsMoney(this.queryParamsMoney).then((response) => {
					this.statisticsMoneyList = response;
					console.log(this.statisticsMoneyList, " this.statisticsMoneyList");
				});
			},
			//成本统计
			getCost() {
				console.log("当前年份:", this.queryParamsCost.year);
				statisticsCost(this.queryParamsCost).then((response) => {
					this.statisticsCostList = response;
					console.log(this.statisticsCostList, 'this.statisticsCostList');
				});
			},
			onIndex(val) {
				this.queryParamsIndex.year = val.detail.value;
				this.getIndexYear();
			},
			onProject(val) {
				this.queryParamsProject.year = val.detail.value;
				this.getProject();
			},
			onContract(val) {
				this.queryParamsContract.year = val.detail.value;
				this.getContract();
			},
			onMoney(val) {
				this.queryParamsMoney.year = val.detail.value;
				this.getMoney()
			},
			onCost(val) {
				this.queryParamsCost.year = val.detail.value;
				this.getCost()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},



	}
</script>

<style scoped lang="scss">
	@import "./common.scss";
</style>